<template>
	<wd-config-provider theme="light">
		<view class="new-tag-container">
			<div class="change-nickname-container">
				<!--新昵称-->
				<div class="line"> 
					新标签
					<input class="nickname-input" type="text" v-model="newTag" :maxlength="5" placeholder="请输入新标签" />
				</div>
				<!--按钮-->
				<div class="line">
					<wd-button @click="addTag">确定</wd-button>
					<wd-button type="info" @click="closeCom">取消</wd-button>
				</div>
			</div>
		</view>
	</wd-config-provider>
</template>

<script setup>
	import { defineEmits, ref } from 'vue'
	const emit = defineEmits(['close', 'addTag'])
	const closeCom = (e)=>{
		emit('close', e)
	}
	const newTag = ref('')
	const addTag = (e)=>{
		if(newTag.value.length < 1){
			uni.showToast({
				title: '标签长度过短',
				icon: 'error'
			})
		}else{
			emit('addTag', newTag.value)
		}
	}
</script>

<style>
	.new-tag-container{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #00000044;
		backdrop-filter: blur(10px);
	}
	.change-nickname-container{
		position: absolute;
		left: 50%;
		top: 50%;
		width: 80%;
		height: 140px;
		padding-top: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translate(-50%, -50%);
		animation: pop-up-ani .4s 1;
		background-color: #ffffff44;
		border-radius: 8px;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	@keyframes pop-up-ani{
		0%{
			opacity: 0;
			transform: translate(-50%, 50%) scale(0);
		}
		20%{
			opacity: 0;
			transform: translate(-50%, 50%) scale(0);
		}
	}
	.change-nickname-container .line{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 90%;
		color: #fff;
	}
	.nickname-input{
		color: #fff;
		border-bottom: 1px solid #555;
		padding: 4px;
		width: calc(100% - 100px);
	}
</style>